<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/repair-list-admin' }">订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>报修详情</el-breadcrumb-item>
    </el-breadcrumb>
    <hr>

    <!-- 报修详情头部 -->
    <el-card style="width: 1100px;">
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="repair-person">
            <el-descriptions :column="1">
              <el-descriptions-item label="报修人">
                {{ repairInfo.repairUserName }}
              </el-descriptions-item>
              <el-descriptions-item label="联系电话">
                {{ repairInfo.repairUserPhone }}
              </el-descriptions-item>
            </el-descriptions>
            <el-avatar src="../assets/img/user-img.png" :size="100"></el-avatar>
          </div>
        </el-col>

        <el-col :span="16">
          <el-descriptions :column="2">
            <el-descriptions-item label="编号">{{ repairInfo.repairNum }}</el-descriptions-item>
            <el-descriptions-item label="预约维修时间">{{ repairInfo.appointmentTime }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="1">
            <el-descriptions-item label="维修项目">{{ repairInfo.repairType }}</el-descriptions-item>
            <el-descriptions-item label="故障描述">{{ repairInfo.repairContent }}</el-descriptions-item>
            <el-descriptions-item label="报修时间">{{ repairInfo.repairTime }}</el-descriptions-item>
            <el-descriptions-item label="区域地址">{{ repairInfo.repairArea }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>

    <!-- 用料信息 -->
    <div class="material-info-container" v-if="isWorkerOrAdmin">
      <el-card style="width: 1100px; margin-top: 20px;">
        <span>用料信息</span>
        <el-table :data="repairInfo.materials" empty-text="暂无数据" style="width: 100%">
          <el-table-column prop="materialCode" label="材料编码" align="center"/>
          <el-table-column prop="count" label="数量" align="center"/>
        </el-table>
      </el-card>
    </div>

    <el-row :gutter="10" style="width: 1100px">
      <el-col span="12">
        <!-- 状态流程图 -->
        <div class="status-flow">
          <el-timeline class="custom-timeline">
            <el-timeline-item
                v-for="(log, index) in reversedRepairLogDTOList"
                :key="log.repairLogId"
                :timestamp="log.operDate"
                placement="top"
                :color="index === 0 ? '#e6a23c' : '#0023F5'"
                :icon="index === 0 ? 'el-icon-edit' : 'el-icon-check'">
              <el-card shadow="hover" class="custom-card">
                <div class="timeline-content">
                  <h4 class="timeline-title">{{ log.operName }}</h4>
                  <p class="timeline-reason">{{ log.operReason }}</p>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-col>
      <el-col span="12" :offset="6">
        <!-- 报修照片 -->
        <div class="col-md-4 mar-t30">
          <!-- 标题部分 -->
          <div class="ft18">
            <img src="../assets/img/icon07.png" width="28" height="26" alt="icon" />
            报修照片
          </div>

          <!-- 图片展示区域 -->
          <div class="repair-img-tab mar-t10" @click="openViewer(0)">
            <div class="tab-img">
              <i></i>
              <img :src="repairPhotoList[1]" alt="预览图片1" @click.stop="openViewer(1)" />
            </div>
            <div style="z-index:1">
              <img :src="repairPhotoList[0]" width="340" height="228" @click.stop="openViewer(0)" />
            </div>
          </div>

          <!-- 图片预览组件 -->
          <el-image-viewer
              v-if="isViewerVisible"
              :url-list="repairPhotoList"
              :initial-index="currentIndex"
              @close="isViewerVisible = false"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElCard,
  ElAvatar,
  ElDescriptions,
  ElDescriptionsItem,
  ElTimeline,
  ElTimelineItem,
  ElImageViewer,
} from 'element-plus';
import axios from 'axios';
import { ElMessage } from 'element-plus';

export default {
  components: {
    ElBreadcrumb,
    ElBreadcrumbItem,
    ElCard,
    ElAvatar,
    ElDescriptions,
    ElDescriptionsItem,
    ElTimeline,
    ElTimelineItem,
    ElImageViewer,
  },
  name: 'repair-info',
  data() {
    return {
      repairId: this.$route.params.id,
      repairNum: this.$route.params.num,
      repairInfo: {},
      repairLogDTOList: [],
      repairPhotoList: [],
      roleName: '',
      isViewerVisible: false,
      currentIndex: 0,
    };
  },
  computed: {
    isWorkerOrAdmin() {
      return this.roleName === '维修员' || this.roleName === '管理员';
    },
    reversedRepairLogDTOList() {
      return [...this.repairLogDTOList].reverse();
    }
  },
  mounted() {
    this.fetchRepairInfo();
    this.roleName = localStorage.getItem('roleName');
  },
  methods: {
    openViewer(index) {
      this.currentIndex = index;
      this.isViewerVisible = true;
    },
    fetchRepairInfo() {
      const repairId = Number(this.repairId);
      const repairNum = this.repairNum;

      if (isNaN(repairId)) {
        this.$message.error("维修记录ID无效，请输入有效的数字");
        return;
      }

      if (!repairNum) {
        this.$message.error("维修单号无效，请输入有效的维修单号");
        return;
      }

      axios.get('/repaircenter/repair/selectRepairById', {
        params: {
          repairId: repairId,
          repairNum: repairNum
        }
      })
      .then(response => {
        if (response.data.code === 200) {
          this.repairInfo = response.data.data;
          this.repairLogDTOList = response.data.data.repairLogDTOList || [];
          this.repairPhotoList = response.data.data.repairPhotoList || [];
          this.repairInfo.materials = response.data.data.repairMaterialDTOList || [];
        } else {
          this.$message.error("获取报修信息失败");
        }
      })
      .catch(error => {
        this.$message.error("获取报修信息失败");
        console.error(error);
      })
      .finally(() => {
        this.loading = false;
      });
    },
  },
};
</script>

<style scoped>
.repair-person {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.status-flow {
  margin-top: 20px;
}

.material-info-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.custom-timeline {
  max-width: 600px;
  margin: 0 auto;
  padding: 10px 0;
}

.custom-card {
  padding: 20px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.timeline-content {
  display: flex;
  flex-direction: column;
}

.timeline-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.timeline-reason {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}
</style>
